<HTML>
	<HEAD>
		<TITLE></TITLE>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<META name="GENERATOR" content="BLOCKNOTE.NET">
		<STYLE>
      HTML { background-color:threedlight; }
      BODY { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
      P { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
      DIV { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
      
      progress { vertical-align:middle; }
      
      p#small > progress { height:0.8em; width:8em; }
      
      
      p.custom > progress
      {
        behavior:progress; 
        background-repeat:expand; 
        background-image:url(images/progress-back.png);
        background-position:8px 8px 8px 8px; /*left top right bottom offsets*/
      
        height: 13px;
        width: 64px;
        padding: 4px;
        
        foreground-repeat:expand;  
        foreground-position:5px 5px 5px 5px; /*left top right bottom offsets*/
        foreground-image:url(images/progress-body.png);  
      }

      p.custom-clip > progress
      {
        -bar:"clip";
        behavior:progress; 
        background-repeat:expand; 
        background-image:url(images/progress-body-dark.png);
        background-position:5 5 5 5; 
      
        height: 13px;
        width: 64px;
        padding:0;
        
        foreground-repeat:expand;  
        foreground-position:5 5 5 5; 
        foreground-image:url(images/progress-body.png);  
      }
	</STYLE>
	</HEAD>
	<BODY>
      <h1>progress bar test</h1>
      <h2>normal</h2>
      <p>0%:<progress name="p1" maxvalue="100" value="0"/>
         25%:<progress name="p2" maxvalue="100" value="25"/>
         50%:<progress name="p3" maxvalue="100" value="50"/>
         75%:<progress name="p4" maxvalue="100" value="75"/>
         100%:<progress name="p5" maxvalue="100" value="100"/></p>
      <h2>small</h2>
      <p id="small">0%:<progress name="p1" maxvalue="100" value="0"/>
         25%:<progress name="p2" maxvalue="100" value="25"/>
         50%:<progress name="p3" maxvalue="100" value="50"/>
         75%:<progress name="p4" maxvalue="100" value="75"/>
         100%:<progress name="p5" maxvalue="100" value="100"/></p>
      <h2>custom</h2>
      Resizing foreground image:
      <p .custom>0%:<progress name="p1" maxvalue="100" value="0"/>
         25%:<progress name="p2" maxvalue="100" value="25"/>
         50%:<progress name="p3" maxvalue="100" value="50"/>
         75%:<progress name="p4" maxvalue="100" value="75" />
         100%:<progress name="p5" maxvalue="100" value="100"/></p>
      <h2>custom</h2>         
      Clipping foreground image:
      <p .custom-clip>0%:<progress name="p1" maxvalue="100" value="0" />
         25%:<progress name="p2" maxvalue="100" value="25" />
         50%:<progress name="p3" maxvalue="100" value="50" />
         75%:<progress name="p4" maxvalue="100" value="75" />
         100%:<progress name="p5" maxvalue="100" value="100" /></p>

         
	</BODY>
	</BASEFONT>
</HTML>
